<template>
  <view class="list-container">
    <view class="list">
      <!-- 公告栏标题 -->
      <view class="list-title">
        <text>最新通知</text>
      </view>
      <!-- 公告栏列表 -->
      <view class="scroll-view-container">
        <scroll-view scroll-y="true">
          <block v-for="item in bulletinList" :key='item.id'>
            <bulletinBoard-list-item :bulletin='item'></bulletinBoard-list-item>
          </block>
        </scroll-view>
      </view>
    </view>

  </view>
</template>

<script>
import { getBulletinListAsync } from '@/api/bulletin';
export default {
  data () {
    return {
      bulletinList: []
    };
  },
  onLoad () {
    this.getList()
  },
  methods: {
    async getList () {
      try {
        const res = await getBulletinListAsync()
        this.bulletinList = res.data.data
        console.log('%c [  ]-42', 'font-size:13px; background:pink; color:#bf2c9f;', res)
      } catch (error) {
        console.log('%c [  ]-42', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list-container {
  margin-top: 20rpx;

  .list {
    margin: 0 auto;
    border: 1px solid #b8b8b8;
    border-radius: 10rpx;
    box-shadow: 0 10rpx 10rpx 2rpx gray;
    width: 95%;

  }

  .list-title {
    display: flex;
    justify-content: space-between;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #81aecd;
    width: 100%;
    border-radius: 10rpx 10rpx 0 0;


    text {
      margin-left: 40rpx;
      position: relative;

      /* 通知前面的小竖杠 */
      &::before {
        position: absolute;
        top: 22rpx;
        left: -20rpx;
        content: ' ';
        width: 5rpx;
        height: 40rpx;
        background-color: #fff;
        border-radius: 10rpx;
      }
    }
  }

  .scroll-view-container {
    padding: 0 20rpx;


    scroll-view {
      padding: 0 10rpx;
    }
  }
}
</style>
